<template>
  <div class="table-page-search-wrapper">
    <a-form layout="inline">
      <a-row :gutter="20">
        <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
          <a-form-item label="领用部门">
            <a-input
              allowClear
              v-model="queryParam.department"
              placeholder="请输入"
            />
          </a-form-item>
        </a-col>
        <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
          <a-form-item label="备注">
            <a-input
              allowClear
              v-model="queryParam.remarks"
              placeholder="请输入"
            />
          </a-form-item>
        </a-col>
        <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
          <a-form-item label="手机号">
            <a-input
              allowClear
              v-model="queryParam.phone"
              placeholder="请输入"
            />
          </a-form-item>
        </a-col>
        <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
          <a-form-item label="券号">
            <a-input
              allowClear
              v-model="queryParam.nos"
              placeholder="请输入"
            />
          </a-form-item>
        </a-col>
        <a-col :xxl="9" :xl="9" :lg="9" :sm="24">
          <a-form-item label="时间" has-feedback>
            <a-range-picker
              style="width:100%;"
              show-time
              valueFormat="YYYY-MM-DD HH:mm:ss"
              format="YYYY-MM-DD HH:mm:ss"
              v-model="queryParam.time"
            />
          </a-form-item>
        </a-col>
        <a-col :xxl="7" :xl="7" :lg="7" :sm="24">
          <a-form-item label="批次号">
            <a-input
              allowClear
              v-model="queryParam.id"
              placeholder="请输入"
            />
          </a-form-item>
        </a-col>
        <a-col :xxl="24" :xl="24" :lg="24" :sm="24">
          <span class="table-page-search-submitButtons">
            <a-button  @click="search">查询</a-button>
            <a-button style="margin-left: 8px" @click="reset">重置</a-button>
            <a-button  style="margin-left: 8px" @click="handleTemplate">领券页模版管理</a-button>
            <a-button  style="margin-left: 8px" @click="handleExportOfficeSends">下载汇总表</a-button>
            <a-button  style="margin-left: 8px" @click="handleExportOfficeSendsDetails">下载核销明细</a-button>
            <a-button type="primary" style="margin-left: 8px" @click="handleIssue">发券</a-button>
          </span>
        </a-col>
      </a-row>
    </a-form>
    <a-modal v-model="currentVisibleTemplat" width="400px" title="领券页模版管理" @cancel="currentVisibleTemplat = false" :footer="null">
      <a-button type="primary" style="width: 100%;height: 40px;margin: 20px 0 0;" @click="handleAddAndEditTemplate">
        创建新的模版
      </a-button>
      <a-button type="primary" style="width: 100%;height: 40px;margin: 20px 0;" @click="handleTemplateList">
        管理现有模版
      </a-button>
    </a-modal>
    <a-modal v-model="currentVisibleTemplatOne" width="400px" title="当前批次选择的领券模版" @ok="handleSubmitTemplatOne" @cancel="currentVisibleTemplat = false" >
      <a-form-model ref="templatOneForm" :model="templatOneForm" :rules="templatOneRules">
        <a-form-model-item label="" prop="applyTemplateId" style="margin-top: 30px;">
          <a-select v-model="templatOneForm.applyTemplateId" placeholder="请选择" show-search :filter-option="filterOption" >
            <a-select-option :value="item.id" v-for="(item, index) in showPageList" :key="index">{{item.templateName}}</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
import { showPageList } from '@/api/headquartersCoupon/index'
export default {
  props: {
    visibleTemplat: {
      type: Boolean,
      default: false
    },
    visibleTemplatOne: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showPageList: [],
      queryParam:{
        department: '',
        remarks: '',
        nos: ''
      },
      templatOneForm: {
        applyTemplateId: ''
      },
      templatOneRules: {
        applyTemplateId: [
          { required: true, message: '请选择', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    currentVisibleTemplat: {
      get () {
        return this.visibleTemplat
      },
      set (val) {
        this.$emit('update:visibleTemplat', val)
      }
    },
    currentVisibleTemplatOne: {
      get () {
        return this.visibleTemplatOne
      },
      set (val) {
        this.$emit('update:visibleTemplatOne', val)
      }
    }
  },
  created() {
    this.getShowPageList()
  },
  mounted() {
  },
  methods: {
    // 下载汇总表
    handleExportOfficeSends(){
      this.$emit('handleExportOfficeSends')
    },

    handleExportOfficeSendsDetails() {
      this.$emit('handleExportOfficeSendsDetails')
    },

    // 当前批次选择的领券模版
    handleSubmitTemplatOne() {
      this.$refs.templatOneForm.validate(valid => {
        if (valid) {
          this.$emit('handleSubmitChangeTemplat', this.templatOneForm.applyTemplateId)
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    },

    // 领券页模版管理
    handleTemplate() {
      this.currentVisibleTemplat = true
    },

    // 创建新的模版
    handleAddAndEditTemplate() {
      this.currentVisibleTemplat = false
      this.$router.push(`/headquarters-coupon/addAndEditTemplate/null`)
    },

    // 管理现有模版
    handleTemplateList() {
      this.currentVisibleTemplat = false
      this.$router.push(`/headquarters-coupon/templateList`)
    },

    // 发券
    handleIssue() {
      this.$emit('handleIssue')
    },

    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },

    search() {
      let queryParam = this.filterFields(this.queryParam)
      this.$emit('onSearch', queryParam)
    },
    reset() {
      this.queryParam = {
        department: '',
        remarks: ''
      }
      let queryParam = this.filterFields(this.queryParam)
      this.$emit('onSearch', queryParam)
    },
    filterFields(values) {
      const formValue = {}
      Object.keys(values).forEach(i => {
        if (values[i] && values[i].length) {
          if (i === 'time') {
            formValue.startTime = values[i][0]
            formValue.endTime = values[i][1]
          } else {
            formValue[i] = values[i]
          }

        }
      })
      return formValue
    },

    // 券模板列表
    getShowPageList() {
      const data = {
         current: 1,
         size: 100
      }
      showPageList(data).then(res => {
        if (res.code === 200) {
          const { records } = res.data
          this.showPageList = records
        } else {
          this.$message.error(res.msg || res.message)
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.table-page-search-submitButtons {
  display: flex;
  justify-content: flex-end;
}
</style>
<style scoped>
  /* For demo */
  .ant-carousel >>> .slick-slide {
    text-align: center;
    height: 160px;
    line-height: 160px;
    background: #364d79;
    overflow: hidden;
  }

  .ant-carousel >>> .slick-slide h3 {
    color: #fff;
  }
</style>
